$(function () {
    let q = {
        pagenum:1,
        pagesize:3,
        cate_id:'',
        state:'',
  }
// 需求1.初始化文章列表  封装成函数 将来使用
    let layer = layui.layer
    intiArticleList()
    function intiArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // get 类型使用params属性 post类型使用data属性
            params: q
        }).then(res => {
        //    console.log(res.data.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                <tr>
                    <td>${ele.title}</td>
                    <td>${ele.cate_name}</td>
                    <td>${formatDate(ele.pub_date)}</td>
                    <td>${ele.state}</td>
                    <td>
                        <a href="/article/art_edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button data-id="${ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
                `)
            })
            // 循环后赋值
            $('tbody').empty().html(arr.join(''));
            // 分页
            renderPage(res.data.total);
        });
           


  }
  
    // 需求2.渲染筛选选中的文章类别列表
    let form  =layui.form
    initArtCateList(); //函数不调用  不执行
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
        }).then(res => {
            //  console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.messahe)
            }
            //成功 渲染
            let arr = ['<option value="">请选择文章所属分类</option>'];
            res.data.data.forEach(ele => {
                if (ele.Id < 0) return;
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });
            // 循环结束 赋值
            let str = arr.join('');
            $('[name=cate_id]').empty().html(str);
            // form.rendre() 可以渲染layui中的 select/checkbox/radio
            form.render();
        });
    }

    //  需求3.筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // cate_id和state的值修改 根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val();
        // 重新渲染文章列表
        intiArticleList();
    })

    // 需求4. 分页
    function renderPage(total) {
        let laypage = layui.laypage
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit:q.pagesize,    //每行显示多少条
            curr: q.pagenum,  //第几页
            // 显示区域
            layout: ['count', 'limit','prev','page','next','refresh','skip'],
            limits: [2,3,5,10],
            // 页面加载的时候 页码切换的时候会触发 每页面显示条数改变时候触发
            jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                
                //首次不执行
                if (!first) {
                    // 把当前页改变 重新渲染文章列表
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    intiArticleList();
                }
            }
        });
    }

    //    需求5.删除-事件委托/类名/id
    $('tbody').on('click', '.btn-del', function () {
        let id = $(this).attr('data-id');
        //eg1
        layer.confirm('是否确认删除?', {icon: 3, title:'提示'}, function(index){
        //删除的 ajax
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message);
                }
                // 成功 提示  刷新页面
                layer.msg('恭喜您,删除文章成功!');
                $('.btn-del').lenght == 1 && q.pagenum >= 2 && q.pagenum--;
                intiArticleList();
            })
            layer.close(index);
        });
    })
})